import { Component, OnInit, ViewChild } from '@angular/core';
import { STColumn, STComponent, STPage, STRes } from '@delon/abc/st';
import { SFSchema } from '@delon/form';
import { ModalHelper, _HttpClient } from '@delon/theme';

import { SysAssignMenuComponent } from './assign/menu/menu.component';
import { SysAssignPermissionComponent } from './assign/permission/permission.component';
import { SysRoleEditComponent } from './edit/edit.component';

@Component({
  selector: 'app-sys-role',
  templateUrl: './role.component.html'
})
export class SysRoleComponent implements OnInit {
  url = `api/roles`;
  searchSchema: SFSchema = {
    properties: {
      keyword: {
        type: 'string',
        title: '',
        ui: {
          placeholder: '关键词'
        }
      }
    }
  };

  @ViewChild('st') private readonly st!: STComponent;
  columns: STColumn[] = [
    { title: 'ID', index: 'ID', className: 'text-center' },
    { title: '名称', index: 'name', className: 'text-center' },
    { title: '别名', index: 'alias', className: 'text-center' },
    {
      title: '状态',
      index: 'status',
      type: 'badge',
      badge: {
        0: { text: '禁用', color: 'error' },
        1: { text: '启用', color: 'success' }
      },
      className: 'text-center'
    },
    { title: '描述', index: 'desc' },
    {
      title: '操作',
      className: 'text-center',
      buttons: [
        {
          text: '接口权限',
          type: 'drawer',
          drawer: {
            title: '接口权限',
            component: SysAssignPermissionComponent,
            drawerOptions: {
              nzMaskClosable: true,
              nzWidth: '900px'
            }
          }
        },
        {
          text: '菜单权限',
          type: 'drawer',
          drawer: {
            title: '菜单权限',
            component: SysAssignMenuComponent,
            drawerOptions: {
              nzMaskClosable: true,
              nzWidth: '900px'
            }
          }
        },
        {
          text: '编辑',
          icon: 'edit',
          type: 'static',
          modal: {
            component: SysRoleEditComponent,
            modalOptions: { nzMaskClosable: true }
          },
          click: 'reload'
        },
        { text: '删除', type: 'del', icon: 'delete', className: 'text-error', click: (item: any) => this.del(item.ID) }
      ]
    }
  ];

  res: STRes = {
    reName: {
      total: 'data.total',
      list: 'data.list'
    }
  };
  paginate: STPage = {
    showSize: true
  };

  constructor(private http: _HttpClient, private modal: ModalHelper) {}

  add(): void {
    this.modal.createStatic(SysRoleEditComponent, { i: { id: 0 } }).subscribe(() => this.st.reload());
  }

  del(id: number): void {
    this.http.delete(`api/role/${id}`).subscribe(() => {
      this.st.reload();
    });
  }

  ngOnInit = (): void => {};
}
